<template>
  <div class="container">
    <div class="opt-area-03">
      <div class="left-con">
        <community-select style="margin-bottom:-10px;margin-top: -10px" ref="communitySelect" @callBack="callBack"></community-select>
      </div>
      <div class="left-con" style="margin-bottom: 10px">
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择网格" v-model="params.garden_id" style="width:164px" clearable @on-change="findGridBuildingList(params.garden_id)" @on-clear="clearGrid(6)">
            <Option v-for="item in GridGradenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择楼" v-model="params.building_id" style="width:164px" clearable @on-change="findGridUnitList(params.building_id)" @on-clear="clearGrid(7)">
            <Option v-for="item in GridBuildingList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择单元" v-model="params.unit_id" style="width:164px" clearable @on-change="findGridFloorList(params.unit_id)" @on-clear="clearGrid(8)">
            <Option v-for="item in GridUnitList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择层" v-model="params.floor_id" style="width:164px" clearable @on-change="findGridDoorplateList(params.floor_id)" @on-clear="clearGrid(9)">
            <Option v-for="item in GridFloorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择户" v-model="params.doorplate_id" style="width:164px" clearable @on-clear="clearGrid(10)">
            <Option v-for="item in GridDoorplateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择报警器状态" style="width: 164px" v-model="params.status">
            <Option value="">全部</Option>
            <Option value="正常">正常</Option>
            <Option value="断电">断电</Option>
            <Option value="掉电">掉电</Option>
            <Option value="未连接">未连接</Option>
            <Option value="预热">预热</Option>
            <Option value="低报">低报</Option>
            <Option value="传感器错误">传感器错误</Option>
            <Option value="自检">自检</Option>
            <Option value="传感器故障">传感器故障</Option>
            <Option value="通讯故障">通讯故障</Option>
            <Option value="高报">高报</Option>
            <Option value="失效">失效</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择报警器标签" style="width: 164px" v-model="params.gw_label">
            <Option value="">全部</Option>
            <Option value="0">未处理</Option>
            <Option value="1">已安装</Option>
            <Option value="2">无需安装</Option>
            <Option value="3">应安未安</Option>
          </Select>
        </div>
        <Button class="btnClass" type="info" size="small" @click="searchData()">搜索</Button>
        <Button class="btnClass" :loading="this.loadinge" type="info" size="small" @click="exportData()">导出</Button>
      </div>
    </div>
    <Table border :columns="columns" :data="dataList" :loading="loading" size="small" ref="tableRef">
      <template slot="gw_label" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <span v-if="row.gw_label === '0' || !row.gw_label">未处理</span>
          <span v-if="row.gw_label === '1'">已安装</span>
          <span v-if="row.gw_label === '2'">无需安装</span>
          <span v-if="row.gw_label === '3'">应安未安</span>
        </Row>
      </template>
      <template slot="action" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button v-if="!row.gw_id" class="table-action-btn" style="margin-right: 5px" type="success" size="small" @click="showBind(row)">绑定</Button>
          <Button v-if="row.gw_id" class="table-action-btn" style="margin-right: 5px" type="error" size="small" @click="unBind({doorplate_id: row.doorplate_id, gw_id: 'unbind' })">解绑</Button>
          <Button v-if="!row.gw_id && row.gw_label != '2'" class="table-action-btn" style="margin-right: 5px" type="primary" size="small" @click="updateBind({doorplate_id: row.doorplate_id, gw_label: '2' })">无需安装</Button>
          <Button v-if="!row.gw_id && row.gw_label != '3'" class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="updateBind({doorplate_id: row.doorplate_id, gw_label: '3' })">应安未安</Button>
          <Button v-if="row.gw_id && (row.status === '断电' || row.status === '掉电')" class="table-action-btn" style="margin-right: 5px" type="warning" size="small" @click="showError(row)">异常备注</Button>
<!--          <Button class="table-action-btn" type="error" size="small" @click="deletePeople(row)">删除</Button>-->
        </Row>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
    <Modal width="1000" v-model="modal.show" :title="modal.title">
      <div class="opt-area-03">
        <div class="left-con">
          <div class="input-frame" style="width: 100%;letter-spacing: 1px;margin-bottom: 5px">
            <span style="margin-right: 10px" v-if="row.residential">小区:  {{row.residential}}</span>
            <span style="margin-right: 10px" v-if="row.garden">网格:  {{row.garden}}</span>
            <span style="margin-right: 10px" v-if="row.building">楼:  {{row.building}}</span>
            <span style="margin-right: 10px" v-if="row.unit">单元:  {{row.unit}}</span>
            <span style="margin-right: 10px" v-if="row.floor">层:  {{row.floor}}</span>
            <span style="margin-right: 10px" v-if="row.doorplate">户:  {{row.doorplate}}</span>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="地址" style="width: 164px" v-model="gwParams.ADDR"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="联系人" style="width: 164px" v-model="gwParams.LINK"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="联系电话" style="width: 164px" v-model="gwParams.TEL"/>
          </div>
          <Button class="btnClass" type="info" size="small" @click="getGw(gwParams)">搜索</Button>
        </div>
      </div>
      <Table border :columns="columns2" :data="dataList2" :loading="loading1" size="small" ref="table">
        <template slot="action" slot-scope="{ row }">
          <Row style="margin-bottom: 5px; margin-top: 2px">
            <Button class="table-action-btn" style="margin-right: 5px" type="primary" size="small" @click="bindOk(row)">绑定</Button>
            <!--          <Button class="table-action-btn" type="error" size="small" @click="deletePeople(row)">删除</Button>-->
          </Row>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page_style">
        <Page :current="gwParams.pageNo" :total="gwParams.totalRecord" show-sizer :page-size="gwParams.pageSize" show-elevator
              @on-change="pageAction1" @on-page-size-change="pageSizeChange1"/>
      </Row>
    </Modal>
    <Modal width="400" v-model="errorModal.show" :title="errorModal.title" @on-ok="errorOk">
      <Input v-model="errorModal.error_remark" type="textarea" :rows="4" placeholder="请输入异常备注" />
    </Modal>
  </div>
</template>

<script>
import { getGasWarnerDoorplatePageList, getGasWarnerList, insertGasWarnerDoorplate, getGasWarnerDoorplatePageExportList } from '@/api/z-new-grid'
import CommunitySelect from '@/components/community-select/community-select'
import {
  findBuildingXJList,
  findCommunityXJList,
  findFloorXJList,
  findGardenXJList, findLabelListNew,
  findUnitXJList
} from '@/api/eventlist'

export default {
  components: { CommunitySelect },
  data () {
    return {
      loadinge: false,
      GridGradenList: [],
      GridBuildingList: [],
      GridUnitList: [],
      GridFloorList: [],
      GridDoorplateList: [],
      severUserInfo: {},
      loading: true,
      loading1: true,
      gwParams: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      row: {},
      modal: {
        title: '',
        show: false
      },
      errorModal: {
        title: '',
        show: false,
        error_remark: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      dataList: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '70'
        },
        {
          title: '街道',
          key: 'street',
          width: 150,
          align: 'center'
        },
        {
          title: '社区',
          key: 'community',
          width: 150,
          align: 'center'
        },
        {
          title: '小区',
          key: 'residential',
          width: 100,
          align: 'center'
        },
        {
          title: '网格',
          key: 'garden',
          width: 150,
          align: 'center'
        },
        {
          title: '楼',
          key: 'building',
          width: 150,
          align: 'center'
        },
        {
          title: '单元',
          key: 'unit',
          width: 100,
          align: 'center'
        },
        {
          title: '层',
          key: 'floor',
          width: 50,
          align: 'center'
        },
        {
          title: '户',
          key: 'doorplate',
          width: 50,
          align: 'center'
        },
        {
          title: '报警器号',
          key: 'gw_id',
          width: 150,
          align: 'center'
        },
        {
          title: '联系人',
          key: 'link',
          width: 150,
          align: 'center'
        },
        {
          title: '联系人电话',
          key: 'tel',
          width: 150,
          align: 'center'
        },
        {
          title: '地址',
          key: 'addr',
          width: 150,
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          width: 150,
          align: 'center'
        },
        {
          title: '报警器标签',
          slot: 'gw_label',
          width: 150,
          align: 'center'
        },
        {
          title: '异常备注',
          key: 'error_remark',
          width: 200,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: '210',
          fixed: 'right',
          align: 'center'
        }
      ],
      columns2: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '70'
        },
        {
          title: '报警器号',
          key: 'SID',
          width: '150',
          align: 'center'
        },
        {
          title: '地址',
          key: 'ADDR',
          align: 'center'
        },
        {
          title: '联系人',
          key: 'LINK',
          width: '100',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'TEL',
          width: '120',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: '100',
          fixed: 'right',
          align: 'center'
        }
      ],
      dataList2: []
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.$refs.communitySelect.init(this.severUserInfo)
  },
  methods: {
    exportData () {
      this.loadinge = true
      let columns = [
        {
          title: '街道',
          key: 'street',
          width: 150,
          align: 'center'
        },
        {
          title: '社区',
          key: 'community',
          width: 150,
          align: 'center'
        },
        {
          title: '小区',
          key: 'residential',
          width: 100,
          align: 'center'
        },
        {
          title: '网格',
          key: 'garden',
          width: 150,
          align: 'center'
        },
        {
          title: '楼',
          key: 'building',
          width: 150,
          align: 'center'
        },
        {
          title: '单元',
          key: 'unit',
          width: 100,
          align: 'center'
        },
        {
          title: '层',
          key: 'floor',
          width: 50,
          align: 'center'
        },
        {
          title: '户',
          key: 'doorplate',
          width: 50,
          align: 'center'
        },
        {
          title: '报警器号',
          key: 'gw_id',
          width: 150,
          align: 'center'
        },
        {
          title: '联系人',
          key: 'link',
          width: 150,
          align: 'center'
        },
        {
          title: '联系人电话',
          key: 'tel',
          width: 150,
          align: 'center'
        },
        {
          title: '地址',
          key: 'addr',
          width: 150,
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          width: 150,
          align: 'center'
        },
        {
          title: '报警器标签',
          key: 'gw_label_name',
          width: 150,
          align: 'center'
        },
        {
          title: '异常备注',
          key: 'error_remark',
          width: 200,
          align: 'center'
        }
      ]
      getGasWarnerDoorplatePageExportList(this.params).then(async ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$refs.tableRef.exportCsv({
            filename: '燃气报警器',
            columns: columns,
            data: ret.data.data
          })
          this.loadinge = false
        } else {
          await this.error(data)
          this.loadinge = false
        }
      })
    },
    clearGrid (e) {
      if (e === 6) {
        this.params.garden_id = ''
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 7) {
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 8) {
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 9) {
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 10) {
        this.params.doorplate_id = ''
      }
    },
    findGridGradenList () {
      let data = {
        id: this.severUserInfo.company_id
      }
      console.log(data)
      findCommunityXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridGradenList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    findGridBuildingList (e) {
      let data = {
        id: e
      }
      findGardenXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridBuildingList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      }
      )
    },
    findGridUnitList (e) {
      let data = {
        id: e
      }
      findBuildingXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridUnitList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    findGridFloorList (e) {
      let data = {
        id: e
      }
      findUnitXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridFloorList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    findGridDoorplateList (e) {
      let data = {
        floor_id: e
      }
      findFloorXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridDoorplateList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    findGridModuleList () {
      findLabelListNew().then(ret => {
        this.focusGroupList = ret.data.data
      })
      // findModuleList().then(ret => {
      //   this.focusGroupList = ret.data.data
      // })
    },
    callBack (e) {
      console.log('callBack', e)
      this.params.area_id = e.area_id
      this.params.street_id = e.street_id
      this.params.community_id = e.community_id
      // this.searchData()
    },
    async unBind (params) {
      this.$Modal.confirm({
        title: '解除绑定',
        content: '<p>确认解除燃气报警器和该户的绑定吗？</p>',
        onOk: async () => {
          await this.insertGasWarnerDoorplate(params)
          // await this.init()
        },
        onCancel: () => {
        }
      })
    },
    async updateBind (params) {
      await this.insertGasWarnerDoorplate(params)
      // await this.init()
    },
    async bindOk (row) {
      let params = {
        doorplate_id: this.row.doorplate_id,
        gw_id: row.SID,
        gw_label: '1'
      }
      this.modal.show = false
      await this.insertGasWarnerDoorplate(params)
      // await this.init()
    },
    async errorOk () {
      let params = {
        doorplate_id: this.row.doorplate_id,
        error_remark: this.errorModal.error_remark
      }
      await this.insertGasWarnerDoorplate(params)
    },
    async insertGasWarnerDoorplate (e) {
      await insertGasWarnerDoorplate(e).then(async ret => {
        let data = ret.data
        if (data.errcode === 0) {
          await this.success()
          await this.init()
        } else {
          await this.error(data)
        }
      })
    },
    getGw (params) {
      this.loading1 = true
      getGasWarnerList(params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.dataList2 = data.data.results
          this.gwParams.totalRecord = data.data.totalRecord
          this.loading1 = false
        } else {
          this.error(data)
          this.loading1 = false
        }
      })
    },
    showBind (row) {
      this.row = row
      this.gwParams = {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
      this.gwParams.company_code = row.company_code
      this.getGw({ company_code: row.company_code })
      this.modal.show = true
      this.modal.title = '绑定燃气报警器'
    },
    showError (row) {
      this.row = row
      this.errorModal.show = true
      this.errorModal.title = '填写异常备注'
      this.errorModal.error_remark = row.error_remark
    },
    searchData () { // 搜索
      this.params.pageNo = 1
      this.init()
    },
    async init () {
      this.loading = true
      await getGasWarnerDoorplatePageList(this.params).then(async ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.dataList = data.data.results
          this.params.totalRecord = data.data.totalRecord
          this.loading = false
        } else {
          await this.error(data)
          this.loading = false
        }
      })
    },
    pageAction1 (page) {
      this.gwParams.pageNo = page
      this.getGw(this.gwParams)
    },
    pageSizeChange1 (e) {
      this.gwParams.pageSize = e
      this.getGw(this.gwParams)
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    'severUserInfo.company_grade' (val) {
      if (val === '2') {
      } else if (val === '3') {
      } else if (val === '4') {
      } else if (val === '5') {
        this.columns = [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            fixed: 'left',
            width: '70'
          },
          {
            title: '小区',
            key: 'residential',
            width: 100,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '网格',
            key: 'garden',
            width: 150,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '楼',
            key: 'building',
            width: 150,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '单元',
            key: 'unit',
            width: 100,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '层',
            key: 'floor',
            width: 50,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '户',
            key: 'doorplate',
            width: 50,
            fixed: 'left',
            align: 'center'
          },
          {
            title: '报警器号',
            key: 'gw_id',
            width: 150,
            align: 'center'
          },
          {
            title: '联系人',
            key: 'link',
            width: 150,
            align: 'center'
          },
          {
            title: '联系人电话',
            key: 'tel',
            width: 150,
            align: 'center'
          },
          {
            title: '地址',
            key: 'addr',
            width: 150,
            align: 'center'
          },
          {
            title: '状态',
            key: 'status',
            width: 150,
            align: 'center'
          },
          {
            title: '报警器标签',
            slot: 'gw_label',
            width: 150,
            align: 'center'
          },
          {
            title: '异常备注',
            key: 'error_remark',
            width: 200,
            align: 'center'
          },
          {
            title: '操作',
            slot: 'action',
            width: '210',
            fixed: 'right',
            align: 'center'
          }
        ]
        this.findGridGradenList()
      }
    }
  }
}
</script>

<style scoped>
.container{
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-03 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-03 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-03 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-03 .left-con span {
  font-weight: bold;
}

.opt-area-03 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-03 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
.btnClass{
  margin-top: 5px;
  margin-right:5px
}
</style>
